<template>
  <div class="needWorker">
    <h1><span> 人才招聘</span></h1>

    <article>
      <div>
        <img src="../assets/product-red/manager.png" alt="" class="manager" />
        <h2>区域经理</h2>
        <p>21岁及以上，大专及以上学历</p>
        <p>五官端正语言沟通能力强，较强的团队协作意识和敬业精神</p>
        <p>有一定亲和力,区域内客情维护</p>
        <p>联系电话：王小姐 18688886688</p>
      </div>
      <div>
        <img src="../assets/product-red/needWork.jpg" alt="" class="manager" />
        <h2>专卖店茶艺师</h2>
        <p>年龄20-35岁，高中及以上学历，身高158cm以上</p>
        <p>五官端正语言沟通能力强，较强的团队协作意识和敬业精神</p>
        <p>有一定亲和力良好的服务意识，负责店内茶叶销售，店面维护等日常工作</p>
        <p>联系电话：王小姐 18688886688</p>
      </div>
      <div>
        <img
          src="../assets/product-red/dataWorker.png"
          alt=""
          class="manager"
        />
        <h2>数据分析师</h2>
        <p>年龄22-35岁，大专及以上学历</p>
        <p>五官端正语言沟通能力强，较强的团队协作意识和敬业精神</p>
        <p>负责公司销售数据的处理，市场分析</p>
        <p>联系电话：王小姐 18688886688</p>
      </div>
    </article>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  //import引入的组件
  components: {},
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        main: "",
        name: "",
        phone: "",
        email: "",
        content: "",
      },
      options: regionData,
      selectedOptions: [],
    };
  },
  //方法集合
  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      console.log(loc, "选择的区域");
    },
    backHandle() {
      this.$router.back();
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="less" scoped>
.needWorker {
  height: 80vh;
  background-image: url("../assets/product-red/zsjm.jpg");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding-top: 30px;
  cursor: pointer;
  h1 {
    font-size: 36px;
    color: #a8845c;
    position: relative;
    margin-bottom: 25px;
    & > span {
      &:before {
        content: "";
        position: absolute;
        left: 44%;
        top: -10px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t1.png") no-repeat;
        background-size: cover;
      }
      &::after {
        content: "";
        position: absolute;
        left: 54%;
        bottom: -20px;
        width: 32px;
        height: 32px;
        background: url("../assets/product-red/t2.png") no-repeat;
        background-size: cover;
      }
    }
  }
  article {
    display: flex;
    justify-content: space-evenly;
    h2 {
      color: #a8845c;
    }
    .manager {
      height: 415px;
    }
    height: 68vh;

    color: #a8845c;
    font-size: 16px;
  }
}
</style>
